<template>
	<view class="suspend">
		<view class="title">
			我的工资
		</view>
		<view class="remark">
			当月的数据仅为参考；以工资发放日查看上月的工资为准
		</view>
		<view class="month">
			<view class="left">
				<view>筛选：</view>
				<view class="time" @click="getMonth">
					{{Text}}
				</view>
			</view>
			<view class="right">
				<view class="data" @click="clickLast">上月</view>
				<view class="data" @click="clickNext">下月</view>
			</view>
		</view>
		<view class="content">
			<view class="total">
				<view class="left">
					发放薪资总额
				</view>
				<view class="right">
					{{sum}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					底薪
				</view>
				<view class="right">
					{{basicSalary}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					项目服务提成
				</view>
				<view class="right">
					{{itemEarnings}}
					<!-- {{returnTheCard}}-->
				</view>
			</view>
			<view class="item">
				<view class="left">
					附加商品提成
				</view>
				<view class="right">
					{{productEarnings}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					包间提成
				</view>
				<view class="right">
					{{compartmentEarnings}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					会员卡提成
				</view>
				<view class="right">
					{{memberEarnings}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					储值卡卡提成
				</view>
				<view class="right">
					{{valueEarnings}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					奖励
				</view>
				<view class="right">
					{{birthdayReward}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					社保个人扣除
				</view>
				<view class="right">
					{{socialSecurity}}
				</view>
			</view>

		</view>
		<view class="title" v-if='roles=="store"&&list.length!==0'>
			员工工资
		</view>
		<view class="content" v-for="(item,index) in list" :key="index">
			<view class="total">
				<view class="left">
					员工姓名
				</view>
				<view class="right">
					{{item.name}}
				</view>
			</view>
			<view class="total">
				<view class="left">
					发放薪资总额
				</view>
				<view class="right">
					{{item.sum}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					底薪
				</view>
				<view class="right">
					{{item.basicSalary}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					项目服务提成
				</view>
				<view class="right">
					{{item.itemEarnings}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					附加商品提成
				</view>
				<view class="right">
					{{item.productEarnings}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					包间提成
				</view>
				<view class="right">
					{{item.compartmentEarnings}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					卡项提成
				</view>
				<view class="right">
					{{item.memberEarnings}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					生日奖励
				</view>
				<view class="right">
					{{item.birthdayReward}}
				</view>
			</view>
			<view class="item">
				<view class="left">
					社保个人扣除
				</view>
				<view class="right">
					{{item.socialSecurity}}
				</view>
			</view>

		</view>
		<!-- <u-calendar :show="show" :mode="mode" @confirm="confirm"></u-calendar> -->
		<u-datetime-picker :show="show" v-model="value1" mode="year-month" @confirm="confirm"
			@cancel="colse"></u-datetime-picker>
	</view>
</template>

<script>
	import {
		gettechnicianwage,
		gettechnicianlist,
		getmanager
	} from '@/api/system/work'
	export default {
		data() {
			return {
				show: false,
				mode: 'single',
				Text: '筛选年月',
				value1: Number(new Date()),
				timeItem: '',
				shopVisible: false,
				total: [{
						name: '底薪',
						id: 1
					},
					{
						name: '项目服务提成',
						id: 2
					},
					{
						name: '附加商品提成',
						id: 3
					},
					{
						name: '包间提成',
						id: 4
					},
					{
						name: '卡项提成',
						id: 5
					},
					{
						name: '生日奖励',
						id: 6
					},
					{
						name: '社保个人扣除',
						id: 7
					},
					{
						name: '保底底薪',
						id: 8
					},
				],
				item: {
					type: 'picker',
					label: '工作时间',
					key: 'workBeginTime',
					Time: true,
					isRange: true,
					isSecond: true,
				},
				timeList: ['20分钟', '40分钟', '60分钟', '100分钟'],
				list: [],
				status: {
					0: {
						title: '拒绝',
						color: '#FE1313'
					},
					1: {
						title: '通过',
						color: '#01B961'
					},
				},
				pickerForm: {},
				ruleForm: {},
				basicSalary: '', //底薪
				itemEarnings: '', //项目收益
				productEarnings: '', //附加商品收益
				compartmentEarnings: '', //包间收益
				memberEarnings: '', //会员卡收益
				valueEarnings: '', //储值卡收益
				birthdayReward: '', //生日奖励
				socialSecurity: '', //社保扣除
				sum: '',
				roles: '',
				name: '',
				userId: '',
			}
		},
		created() {
			const userId = uni.getStorageSync('userId');
			this.userId = userId
			const roles = uni.getStorageSync('role');
			this.roles = roles
			const timestamp = this.value1;
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const formattedDateTime = `${year}-${month}`;
			this.Text = formattedDateTime
			this.gettechnicianwage()
		},
		mounted() {
			const userId = uni.getStorageSync('userId');
			this.userId = userId
			const roles = uni.getStorageSync('role');
			this.roles = roles
			const timestamp = this.value1;
			const date = new Date(timestamp);
			const year = date.getFullYear();
			const month = String(date.getMonth() + 1).padStart(2, '0');
			const formattedDateTime = `${year}-${month}`;
			this.Text = formattedDateTime
			this.gettechnicianwage()
		},
		methods: {
			colse() {
				this.show = false
			},
			gettechnicianwage() {
				if (this.roles == 'technician') {
					gettechnicianwage({
						monthTime: this.Text
					}).then(res => {
						this.basicSalary = parseInt(res.data.basicSalary)
						this.itemEarnings = parseFloat(Number(res.data.itemEarnings)+Number(res.data.returnTheCard)).toFixed(2)
						this.productEarnings = parseInt(res.data.productEarnings)
						this.memberEarnings = parseInt(res.data.memberEarnings) + parseInt(res.data.socialSecurity)
						this.valueEarnings = parseInt(res.data.valueEarnings)
						this.birthdayReward = parseInt(res.data.birthdayReward)
						this.compartmentEarnings = parseInt(res.data.compartmentEarnings)
						this.socialSecurity = parseInt(res.data.socialSecurity)
						const sum = this.basicSalary + Number(this.itemEarnings) + this.productEarnings + this
							.memberEarnings + this.birthdayReward + this.compartmentEarnings + this.socialSecurity
						this.sum = sum
					})
				} else {
					gettechnicianlist({
						monthTime: this.Text
					}).then(res => {
						res.rows.forEach(item => {
							let sum = Number(item.basicSalary) + Number(item.itemEarnings) + Number(item
								.productEarnings) + Number(item.memberEarnings) + Number(item
								.birthdayReward) + Number(item.compartmentEarnings) + Number(item
								.socialSecurity);
							item.sum = Number(sum.toFixed(2));
						});
						this.list = res.rows;
					});
					getmanager({
						monthTime: this.Text
					}).then(res => {
						this.basicSalary = parseInt(res.data.basicSalary)
						this.itemEarnings = 0
						this.productEarnings = 0
						this.memberEarnings = 0
						this.birthdayReward = parseInt(res.data.birthdayReward)
						this.compartmentEarnings = 0
						this.socialSecurity = parseInt(res.data.socialSecurity)
						const sum = this.basicSalary + this.itemEarnings + this.productEarnings + this
							.memberEarnings + this.birthdayReward + this.compartmentEarnings + this.socialSecurity
						this.sum = sum
					})
				}
			},
			confirm(e) {
				const timestamp = e.value;
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const formattedDateTime = `${year}-${month}`;
				this.Text = formattedDateTime
				this.show = false
				this.gettechnicianwage()
			},
			getMonth() {
				this.show = true
			},
			clickLast() {
				let currentYear = this.Text.split('-')[0]
				let currentMonth = this.Text.split('-')[1]
				currentYear = currentMonth == '01' ? currentYear - 1 : currentYear
				currentMonth = currentMonth == '01' ? 12 : (currentMonth - 1).toString().padStart(2, '0')
				this.Text = `${currentYear}-${currentMonth}`
				this.gettechnicianwage()
			},

			clickNext() {
				let currentYear = this.Text.split('-')[0]
				let currentMonth = this.Text.split('-')[1]
				currentYear = currentMonth == '12' ? Number(currentYear) + 1 : currentYear
				currentMonth = currentMonth == '12' ? '01' : (Number(currentMonth) + 1).toString().padStart(2, '0')
				this.Text = `${currentYear}-${currentMonth}`
				this.gettechnicianwage()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.suspend {
		.title {
			font-size: 50rpx;
			font-weight: 500;
			color: #000000;
			line-height: 30rpx;
			margin: 43rpx 0;
		}

		.remark {
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
			line-height: 36rpx;
			margin: 43rpx 0;
		}

		.month {
			display: flex;
			line-height: 80rpx;
			justify-content: space-between;

			// margin-bottom: 12rpx;
			.left {
				display: flex;
				width: 300rpx;

				.time {
					width: 190rpx;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					border-radius: 12rpx;
					background-color: #ffffff;
				}
			}

			.right {
				display: flex;

				.data {
					width: 100rpx;
					height: 68rpx;
					color: #333;
					background-color: #fff;
					text-align: center;
					line-height: 68rpx;
					border-radius: 16rpx;
					font-size: 26rpx;
					margin-left: 10rpx;
				}
			}
		}

		.content {
			// margin-top: 16rpx;
			margin: 16rpx auto;
			width: 675rpx;
			// height: 1036rpx;
			background: #F3F3F3;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			opacity: 1;
			background-color: #C27E15;

			.total {
				width: 675rpx;
				height: 95rpx;
				line-height: 95rpx;
				background: #FFF9EF;
				// border-radius: ;
				opacity: 1;
				display: flex;

				// justify-content: space-between;
				.left {
					width: 338rpx;
					text-align: center;
					font-size: 39rpx;
					font-weight: 400;
					color: #000000;
				}

				.right {
					width: 337rpx;
					text-align: center;
					font-size: 39rpx;
					font-weight: 400;
					color: #000000;
				}
			}

			.item {
				width: 675rpx;
				height: 95rpx;
				line-height: 95rpx;
				background: #fff;
				// border-radius: 15rpx 15rpx 0rpx 0rpx;
				opacity: 1;
				display: flex;

				// justify-content: space-between;
				.left {
					width: 338rpx;
					text-align: center;
					font-size: 39rpx;
					font-weight: 400;
					color: #000000;
				}

				.right {
					width: 337rpx;
					text-align: center;
					font-size: 39rpx;
					font-weight: 400;
					color: #000000;
				}
			}
		}
	}
</style>